<template>
	<div class="center-home">
    <div class="left-product">

    </div>
    <div class="left-serach">

    </div>
		<div class="one">
			<div class="one-top">
				<!-- 轮播图 -->
        <div class="banner">
          <img src="../../static/img/solutionB-1.jpg">
        </div>
			</div>

		</div>
<!--		<div class="two two-position">-->
<!--			&lt;!&ndash;公司介绍&ndash;&gt;-->
<!--      <div class="" style="width: 100%;">-->
<!--        <firm></firm>-->
<!--      </div>-->

<!--		</div>-->
		<div class="three">
			<!--产品信息-->
			<div class="home-device-width">
				<devices></devices>
			</div>
		</div>
		<div class="partners">
			<!--合作伙伴-->
			<div class="home-partners-width">
				<partners></partners>
			</div>
		</div>
		<!-- 用户反馈 -->
		<!-- <feedback></feedback> -->
	</div>
</template>


<script>
	import feedback from '../../components/feedback/index.vue'
	import devices from './device/index.vue';
	import carousel from './carousel/index.vue';
	import firm from './firm/index.vue';
	import partners from './partners/index.vue';
	export default {
		components: {
			devices,
			carousel,
			firm,
			feedback,
			partners
		},
		data() {
			return {
				itemArr: [],
				innerHeight: null,
				language: "zh",
				i: 0
			};
		},
		mounted() {
			window.addEventListener("scroll", this.scrolling);
		},
		methods: {
			scrolling() {
				if (document.querySelector(".two")) {
					var height = document.documentElement.scrollTop
					console.log(height)
					var two = document.querySelector(".two")
					var oneModel = document.querySelector(".one-model")
					var oneTop = document.querySelector(".one-top")
					var navbar = document.querySelector('.navbar')
					if (height > 700) {
						two.classList.remove('two-position')
						oneModel.style.display = 'none'
					} else {
						two.classList.add('two-position')
						oneModel.style.display = 'flex'
					}
					// 监听上下滑动
					var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
					var scroll = scrollTop - this.i;
					this.i = scrollTop;

					// 导航栏
					if (height > 380) {
						if (scroll < 0) {
							navbar.style.animation = "nav-top 0.3s ease-in"
							navbar.style.animationFillMode = "both"
						} else {
							navbar.style.animation = "nav-btm 0.3s ease-in"
							navbar.style.animationFillMode = "both"
						}
					}
				}
			}
		},
		beforeDestroy() {
			var navbar = document.querySelector('.navbar')
			navbar.style.animation = "nav-top 0.3s ease-in"
			navbar.style.animationFillMode = "both"
		}
	}
</script>


<style scoped>
.banner{
}
  .left-product{
    position: fixed;
    width: 30%;
    height: 60%;

  }
	.center-home {


	}

	.one {
		position: relative;
	}

	.one-model-position {
		width: 100%;
		height: calc(100vh - 60px);
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;
		z-index: 1;
	}

	.one-top {
		z-index: 50;
	}

	.one-model {
		width: 100%;
		height: calc(100vh - 50px);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.two {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.two-position {
		position: fixed;
		left: 0;
		top: 0px;
	}

	.three {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-device-width {
		width: 1200px;
	}

	.partners {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-partners-width {
		width: 1200px;
	}
</style>
